<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周末短途旅行合约 - 合约详情</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #2563eb;
            --secondary-color: #4f46e5;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --light-bg: #f8fafc;
            --dark-text: #1e293b;
            --light-text: #64748b;
            --border-color: #e2e8f0;
        }
        
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: var(--light-bg);
            color: var(--dark-text);
            line-height: 1.6;
        }
        
        .navbar {
            background-color: var(--primary-color);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .badge-contract {
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--secondary-color);
            border: 1px solid var(--secondary-color);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--light-text);
            font-size: 0.875rem;
        }
        
        .stat-item i {
            color: var(--primary-color);
        }
        
        .author-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .author-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .image-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 1rem;
        }
        
        .image-gallery img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 6px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .image-gallery img:hover {
            transform: scale(1.02);
        }
        
        .image-gallery img:first-child {
            grid-column: span 2;
            grid-row: span 2;
            height: 100%;
        }
        
        .contract-meta {
            background-color: rgba(79, 70, 229, 0.05);
            border-radius: 8px;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        
        .meta-item {
            display: flex;
            margin-bottom: 0.75rem;
        }
        
        .meta-item:last-child {
            margin-bottom: 0;
        }
        
        .meta-label {
            width: 120px;
            font-weight: 500;
            color: var(--dark-text);
        }
        
        .meta-value {
            flex-grow: 1;
            color: var(--light-text);
        }
        
        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 1.5rem;
            font-weight: 600;
            padding-bottom: 8px;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        .action-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: #1d4ed8;
            border-color: #1d4ed8;
        }
        
        .btn-secondary {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        
        .btn-secondary:hover {
            background-color: #4338ca;
            border-color: #4338ca;
        }
        
        .contract-tab {
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 1.5rem;
        }
        
        .contract-tab-item {
            display: inline-block;
            padding: 10px 20px;
            color: var(--light-text);
            text-decoration: none;
            border-bottom: 3px solid transparent;
            transition: all 0.2s ease;
            font-weight: 500;
        }
        
        .contract-tab-item.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }
        
        .contract-tab-item:hover:not(.active) {
            color: var(--dark-text);
            border-bottom-color: var(--border-color);
        }
        
        .participant-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .participant-item:last-child {
            border-bottom: none;
        }
        
        .participant-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .participant-info {
            flex-grow: 1;
        }
        
        .participant-name {
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .participant-joined {
            font-size: 0.8rem;
            color: var(--light-text);
        }
        
        .participant-role {
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary-color);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
        }
        
        .comment-item {
            padding: 1.25rem 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .comment-item:last-child {
            border-bottom: none;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }
        
        .comment-author {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
        }
        
        .comment-time {
            font-size: 0.8rem;
            color: var(--light-text);
        }
        
        .comment-actions {
            display: flex;
            gap: 15px;
        }
        
        .comment-action {
            color: var(--light-text);
            font-size: 0.85rem;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .comment-action:hover {
            color: var(--primary-color);
        }
        
        .comment-content {
            margin-bottom: 0.75rem;
            line-height: 1.6;
        }
        
        .comment-replies {
            margin-top: 1rem;
            padding-left: 1.5rem;
            border-left: 2px solid var(--border-color);
        }
        
        .reply-item {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .reply-item:last-child {
            border-bottom: none;
        }
        
        .reply-form {
            margin-top: 1rem;
            display: none;
        }
        
        .reply-form.active {
            display: block;
        }
        
        .comment-form {
            margin-top: 1.5rem;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }
        
        .timeline-item {
            position: relative;
            padding-left: 2rem;
            padding-bottom: 1.5rem;
            margin-bottom: 1.5rem;
            border-left: 2px solid var(--border-color);
        }
        
        .timeline-item:last-child {
            border-left-color: transparent;
            padding-bottom: 0;
            margin-bottom: 0;
        }
        
        .timeline-dot {
            position: absolute;
            left: -9px;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--primary-color);
        }
        
        .timeline-date {
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: var(--primary-color);
        }
        
        .timeline-content {
            background-color: white;
            border-radius: 6px;
            padding: 1rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .related-contract {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }
        
        .related-contract:hover {
            transform: translateY(-3px);
        }
        
        .related-image {
            height: 140px;
            overflow: hidden;
        }
        
        .related-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .related-contract:hover .related-image img {
            transform: scale(1.05);
        }
        
        .related-content {
            padding: 1rem;
        }
        
        .related-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .related-meta {
            font-size: 0.8rem;
            color: var(--light-text);
        }
        
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: var(--danger-color);
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: bold;
        }
        
        @media (max-width: 992px) {
            .image-gallery {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .image-gallery img:first-child {
                grid-column: span 1;
                grid-row: span 1;
                height: 180px;
            }
        }
        
        @media (max-width: 768px) {
            .image-gallery {
                grid-template-columns: 1fr;
            }
            
            .meta-item {
                flex-direction: column;
            }
            
            .meta-label {
                width: auto;
                margin-bottom: 4px;
            }
            
            .contract-actions {
                flex-wrap: wrap;
                gap: 10px !important;
            }
            
            .contract-actions .btn {
                flex-grow: 1;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <i class="fas fa-shield-alt"></i>
                <span>安全社交</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">担保交友</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">合约交友</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">兴趣群组</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">安全指南</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <div class="position-relative">
                        <button class="btn btn-outline-light">
                            <i class="fas fa-bell"></i>
                        </button>
                        <span class="position-absolute top-0 right-0 translate-middle badge rounded-circle bg-danger">2</span>
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle rounded-circle" type="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" width="36" height="36" class="rounded-circle">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人中心</a></li>
                            <li><a class="dropdown-item" href="#">我的合约</a></li>
                            <li><a class="dropdown-item" href="#">消息通知</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container py-6">
        <!-- 返回链接 -->
        <div class="mb-4">
            <a href="#" class="text-primary text-decoration-none">
                <i class="fas fa-arrow-left me-1"></i> 返回合约列表
            </a>
        </div>
        
        <div class="row">
            <!-- 左侧主内容 -->
            <div class="col-lg-8 mb-6">
                <!-- 合约标题 -->
                <div class="mb-4">
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        <span class="badge bg-warning text-white">热门</span>
                        <span class="badge badge-contract">户外活动</span>
                        <span class="badge bg-info text-white">中期合约</span>
                    </div>
                    <h1 class="mb-3">周末短途旅行合约 - 每月一次</h1>
                    <div class="d-flex flex-wrap gap-4 text-sm text-light-text">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>753 浏览</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>245 喜欢</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>42 条留言</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-users"></i>
                            <span>15/20 人参与</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-calendar-alt"></i>
                            <span>发布于 2023-06-15</span>
                        </div>
                    </div>
                </div>
                
                <!-- 图片画廊 -->
                <div class="mb-6">
                    <div class="image-gallery">
                        <img src="https://picsum.photos/id/301/800/600" alt="旅行照片1：山间小溪" class="img-fluid">
                        <img src="https://picsum.photos/id/302/400/300" alt="旅行照片2：山顶风景" class="img-fluid">
                        <img src="https://picsum.photos/id/303/400/300" alt="旅行照片3：森林小径" class="img-fluid">
                        <img src="https://picsum.photos/id/304/400/300" alt="旅行照片4：湖边日落" class="img-fluid">
                        <img src="https://picsum.photos/id/305/400/300" alt="旅行照片5：古镇街道" class="img-fluid">
                    </div>
                    <div class="text-center text-sm text-light-text mt-2">
                        点击图片查看大图 | 共 8 张照片
                    </div>
                </div>
                
                <!-- 合约操作按钮 -->
                <div class="d-flex gap-3 mb-6 contract-actions">
                    <button class="btn btn-primary flex-grow-1 action-btn">
                        <i class="fas fa-user-plus"></i>
                        加入合约
                    </button>
                    <button class="btn btn-outline-secondary action-btn">
                        <i class="far fa-heart"></i>
                        喜欢
                    </button>
                    <button class="btn btn-outline-secondary action-btn">
                        <i class="far fa-bookmark"></i>
                        收藏
                    </button>
                    <button class="btn btn-outline-secondary action-btn">
                        <i class="fas fa-share-alt"></i>
                        分享
                    </button>
                </div>
                
                <!-- 合约标签页 -->
                <div class="contract-tab">
                    <a href="#detail" class="contract-tab-item active" data-tab="detail">合约详情</a>
                    <a href="#participants" class="contract-tab-item" data-tab="participants">参与成员</a>
                    <a href="#comments" class="contract-tab-item" data-tab="comments">留言讨论</a>
                    <a href="#schedule" class="contract-tab-item" data-tab="schedule">活动安排</a>
                </div>
                
                <!-- 合约详情 -->
                <div class="contract-tab-content" id="detail-content">
                    <h3 class="section-title">合约详情</h3>
                    <div class="bg-white rounded-lg p-5 mb-6 shadow-sm">
                        <p class="mb-4">
                            寻找喜欢旅行的朋友，每月探索一个周边景点，感受不同地方的风土人情和自然景观。无论你是摄影爱好者、美食探索家还是单纯喜欢户外活动，都欢迎加入我们！
                        </p>
                        <p class="mb-4">
                            我们会提前规划好每月的旅行目的地，通常选择距离市区200公里以内、交通便利的景点。活动时间一般安排在周末，两天一夜或单日往返，具体根据目的地而定。
                        </p>
                        <p>
                            希望加入的朋友能遵守约定，积极参与活动，尊重他人，共同维护一个友好的旅行氛围。
                        </p>
                    </div>
                    
                    <h3 class="section-title">合约条款</h3>
                    <div class="bg-white rounded-lg p-5 mb-6 shadow-sm">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item d-flex gap-3">
                                <i class="fas fa-check-circle text-success mt-1"></i>
                                <div>每月参与一次短途旅行活动，无故缺席需提前3天告知</div>
                            </li>
                            <li class="list-group-item d-flex gap-3">
                                <i class="fas fa-check-circle text-success mt-1"></i>
                                <div>活动费用AA制，提前预收，多退少补</div>
                            </li>
                            <li class="list-group-item d-flex gap-3">
                                <i class="fas fa-check-circle text-success mt-1"></i>
                                <div>遵守时间约定，不迟到不早退，不单独行动</div>
                            </li>
                            <li class="list-group-item d-flex gap-3">
                                <i class="fas fa-check-circle text-success mt-1"></i>
                                <div>爱护环境，不乱扔垃圾，保护自然景观</div>
                            </li>
                            <li class="list-group-item d-flex gap-3">
                                <i class="fas fa-check-circle text-success mt-1"></i>
                                <div>活动中互相帮助，共同解决可能遇到的问题</div>
                            </li>
                            <li class="list-group-item d-flex gap-3">
                                <i class="fas fa-check-circle text-success mt-1"></i>
                                <div>合约期限为6个月，期满可协商是否延长</div>
                            </li>
                        </ul>
                    </div>
                    
                    <h3 class="section-title">合约信息</h3>
                    <div class="contract-meta mb-6">
                        <div class="meta-item">
                            <div class="meta-label">合约期限</div>
                            <div class="meta-value">6个月（2023-06-15 至 2023-12-15）</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">活动频率</div>
                            <div class="meta-value">每月一次，通常为周末</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">参与人数</div>
                            <div class="meta-value">最多20人（目前已有15人）</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">活动形式</div>
                            <div class="meta-value">线下活动</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">活动范围</div>
                            <div class="meta-value">市区周边200公里以内</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">费用说明</div>
                            <div class="meta-value">AA制，每次活动预计300-600元不等</div>
                        </div>
                    </div>
                    
                    <h3 class="section-title">下次活动安排</h3>
                    <div class="bg-white rounded-lg p-5 mb-6 shadow-sm">
                        <div class="d-flex flex-wrap gap-4 mb-4">
                            <div class="flex-grow-1 min-w-[200px]">
                                <h5 class="text-primary mb-2">青山湖露营之旅</h5>
                                <div class="d-flex flex-wrap gap-3 text-sm">
                                    <div class="d-flex align-items-center gap-1">
                                        <i class="far fa-calendar-alt text-light-text"></i>
                                        <span>2023-07-15 至 2023-07-16</span>
                                    </div>
                                    <div class="d-flex align-items-center gap-1">
                                        <i class="fas fa-map-marker-alt text-light-text"></i>
                                        <span>青山湖风景区</span>
                                    </div>
                                    <div class="d-flex align-items-center gap-1">
                                        <i class="fas fa-users text-light-text"></i>
                                        <span>已报名: 12人</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <button class="btn btn-sm btn-primary">
                                    我要参加
                                </button>
                            </div>
                        </div>
                        <p class="mb-3 text-sm">
                            <strong>活动内容：</strong> 青山湖露营、湖边烧烤、星空摄影、徒步环湖、日出观赏
                        </p>
                        <p class="text-sm">
                            <strong>集合信息：</strong> 7月15日早上8点，市体育中心东门集合，统一乘车前往
                        </p>
                    </div>
                </div>
                
                <!-- 参与成员 -->
                <div class="contract-tab-content d-none" id="participants-content">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h3 class="section-title mb-0">参与成员 (15/20)</h3>
                        <div class="d-flex gap-2">
                            <div class="position-relative">
                                <button class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                            <button class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-filter"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg p-5 shadow-sm">
                        <!-- 合约创建者 -->
                        <div class="participant-item">
                            <img src="https://picsum.photos/id/1079/40/40" alt="孙浩然的头像" class="participant-avatar">
                            <div class="participant-info">
                                <div class="participant-name">孙浩然 <span class="text-primary">(创建者)</span></div>
                                <div class="participant-joined">加入于 2023-06-15</div>
                            </div>
                            <div class="participant-role">组织者</div>
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-comment"></i> 私信
                            </button>
                        </div>
                        
                        <!-- 其他参与者 -->
                        <div class="participant-item">
                            <img src="https://picsum.photos/id/1062/40/40" alt="张雨晴的头像" class="participant-avatar">
                            <div class="participant-info">
                                <div class="participant-name">张雨晴</div>
                                <div class="participant-joined">加入于 2023-06-16</div>
                            </div>
                            <div class="participant-role">活跃成员</div>
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-comment"></i> 私信
                            </button>
                        </div>
                        
                        <div class="participant-item">
                            <img src="https://picsum.photos/id/1074/40/40" alt="刘阳的头像" class="participant-avatar">
                            <div class="participant-info">
                                <div class="participant-name">刘阳</div>
                                <div class="participant-joined">加入于 2023-06-17</div>
                            </div>
                            <div class="participant-role">普通成员</div>
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-comment"></i> 私信
                            </button>
                        </div>
                        
                        <div class="participant-item">
                            <img src="https://picsum.photos/id/1083/40/40" alt="林小绿的头像" class="participant-avatar">
                            <div class="participant-info">
                                <div class="participant-name">林小绿</div>
                                <div class="participant-joined">加入于 2023-06-18</div>
                            </div>
                            <div class="participant-role">普通成员</div>
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-comment"></i> 私信
                            </button>
                        </div>
                        
                        <div class="participant-item">
                            <img src="https://picsum.photos/id/1012/40/40" alt="李明的头像" class="participant-avatar">
                            <div class="participant-info">
                                <div class="participant-name">李明</div>
                                <div class="participant-joined">加入于 2023-06-19</div>
                            </div>
                            <div class="participant-role">摄影达人</div>
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-comment"></i> 私信
                            </button>
                        </div>
                    </div>
                    
                    <div class="text-center mt-4">
                        <button class="btn btn-outline-secondary">
                            查看全部15名成员
                        </button>
                    </div>
                </div>
                
                <!-- 留言讨论 -->
                <div class="contract-tab-content d-none" id="comments-content">
                    <h3 class="section-title">留言讨论 (42)</h3>
                    
                    <!-- 留言输入框 -->
                    <div class="bg-white rounded-lg p-4 mb-6 shadow-sm comment-form">
                        <div class="d-flex gap-3">
                            <img src="https://picsum.photos/id/64/40/40" alt="当前用户头像" class="comment-avatar">
                            <div class="flex-grow-1">
                                <textarea class="form-control mb-3" rows="3" placeholder="分享你的想法..."></textarea>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-outline-secondary btn-sm">
                                            <i class="far fa-image"></i>
                                        </button>
                                        <button class="btn btn-outline-secondary btn-sm">
                                            <i class="far fa-smile"></i>
                                        </button>
                                        <button class="btn btn-outline-secondary btn-sm">
                                            <i class="far fa-paperclip"></i>
                                        </button>
                                    </div>
                                    <button class="btn btn-primary">
                                        发表留言
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 留言列表 -->
                    <div class="bg-white rounded-lg p-5 shadow-sm">
                        <!-- 留言1 -->
                        <div class="comment-item">
                            <div class="comment-header">
                                <div class="comment-author">
                                    <img src="https://picsum.photos/id/1062/40/40" alt="张雨晴的头像" class="comment-avatar">
                                    <div>
                                        <div class="author-name">张雨晴</div>
                                        <div class="comment-time">2023-07-01 14:30</div>
                                    </div>
                                </div>
                                <div class="comment-actions">
                                    <span class="comment-action reply-btn">回复</span>
                                    <span class="comment-action">点赞 (12)</span>
                                </div>
                            </div>
                            <div class="comment-content">
                                下个月的露营活动我已经准备好了帐篷和睡袋，有没有人需要一起拼车的？我可以开车，还能再载3个人。
                            </div>
                            
                            <!-- 回复框 -->
                            <div class="reply-form">
                                <div class="d-flex gap-2 mb-2">
                                    <img src="https://picsum.photos/id/64/30/30" alt="当前用户头像" class="rounded-circle" width="30" height="30">
                                    <input type="text" class="form-control" placeholder="回复 @张雨晴 ...">
                                </div>
                                <div class="d-flex justify-content-end gap-2">
                                    <button class="btn btn-sm btn-outline-secondary cancel-reply">取消</button>
                                    <button class="btn btn-sm btn-primary">回复</button>
                                </div>
                            </div>
                            
                            <!-- 回复列表 -->
                            <div class="comment-replies">
                                <div class="reply-item">
                                    <div class="comment-header">
                                        <div class="comment-author">
                                            <img src="https://picsum.photos/id/1079/40/40" alt="孙浩然的头像" class="comment-avatar" width="30" height="30">
                                            <div>
                                                <div class="author-name">孙浩然 <span class="text-primary">(创建者)</span></div>
                                                <div class="comment-time">2023-07-01 15:10</div>
                                            </div>
                                        </div>
                                        <div class="comment-actions">
                                            <span class="comment-action reply-btn">回复</span>
                                            <span class="comment-action">点赞 (3)</span>
                                        </div>
                                    </div>
                                    <div class="comment-content">
                                        @张雨晴 太好了！我这边有两位朋友需要搭车，到时候联系你确定具体时间和地点。
                                    </div>
                                </div>
                                
                                <div class="reply-item">
                                    <div class="comment-header">
                                        <div class="comment-author">
                                            <img src="https://picsum.photos/id/1012/40/40" alt="李明的头像" class="comment-avatar" width="30" height="30">
                                            <div>
                                                <div class="author-name">李明</div>
                                                <div class="comment-time">2023-07-01 16:45</div>
                                            </div>
                                        </div>
                                        <div class="comment-actions">
                                            <span class="comment-action reply-btn">回复</span>
                                            <span class="comment-action">点赞 (1)</span>
                                        </div>
                                    </div>
                                    <div class="comment-content">
                                        @张雨晴 我也想搭车，请问还有位置吗？我可以分担油费~
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 留言2 -->
                        <div class="comment-item">
                            <div class="comment-header">
                                <div class="comment-author">
                                    <img src="https://picsum.photos/id/1074/40/40" alt="刘阳的头像" class="comment-avatar">
                                    <div>
                                        <div class="author-name">刘阳</div>
                                        <div class="comment-time">2023-06-28 09:15</div>
                                    </div>
                                </div>
                                <div class="comment-actions">
                                    <span class="comment-action reply-btn">回复</span>
                                    <span class="comment-action">点赞 (8)</span>
                                </div>
                            </div>
                            <div class="comment-content">
                                请问露营需要带哪些装备？我是新手，第一次参加这种活动，希望大家能给点建议。
                            </div>
                            
                            <!-- 回复框 -->
                            <div class="reply-form">
                                <div class="d-flex gap-2 mb-2">
                                    <img src="https://picsum.photos/id/64/30/30" alt="当前用户头像" class="rounded-circle" width="30" height="30">
                                    <input type="text" class="form-control" placeholder="回复 @刘阳 ...">
                                </div>
                                <div class="d-flex justify-content-end gap-2">
                                    <button class="btn btn-sm btn-outline-secondary cancel-reply">取消</button>
                                    <button class="btn btn-sm btn-primary">回复</button>
                                </div>
                            </div>
                            
                            <!-- 回复列表 -->
                            <div class="comment-replies">
                                <div class="reply-item">
                                    <div class="comment-header">
                                        <div class="comment-author">
                                            <img src="https://picsum.photos/id/1062/40/40" alt="张雨晴的头像" class="comment-avatar" width="30" height="30">
                                            <div>
                                                <div class="author-name">张雨晴</div>
                                                <div class="comment-time">2023-06-28 10:30</div>
                                            </div>
                                        </div>
                                        <div class="comment-actions">
                                            <span class="comment-action reply-btn">回复</span>
                                            <span class="comment-action">点赞 (5)</span>
                                        </div>
                                    </div>
                                    <div class="comment-content">
                                        @刘阳 基础装备：帐篷、睡袋、防潮垫、手电筒、换洗衣物、个人洗漱用品。如果有的话可以带点零食和桌游，晚上大家可以一起玩~
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 留言3 -->
                        <div class="comment-item">
                            <div class="comment-header">
                                <div class="comment-author">
                                    <img src="https://picsum.photos/id/1083/40/40" alt="林小绿的头像" class="comment-avatar">
                                    <div>
                                        <div class="author-name">林小绿</div>
                                        <div class="comment-time">2023-06-25 16:20</div>
                                    </div>
                                </div>
                                <div class="comment-actions">
                                    <span class="comment-action reply-btn">回复</span>
                                    <span class="comment-action">点赞 (15)</span>
                                </div>
                            </div>
                            <div class="comment-content">
                                上次去的古镇真的很美，拍了好多照片，已经整理好分享到群相册了，大家可以去看看~ 期待下个月的露营活动！
                            </div>
                            
                            <!-- 回复框 -->
                            <div class="reply-form">
                                <div class="d-flex gap-2 mb-2">
                                    <img src="https://picsum.photos/id/64/30/30" alt="当前用户头像" class="rounded-circle" width="30" height="30">
                                    <input type="text" class="form-control" placeholder="回复 @林小绿 ...">
                                </div>
                                <div class="d-flex justify-content-end gap-2">
                                    <button class="btn btn-sm btn-outline-secondary cancel-reply">取消</button>
                                    <button class="btn btn-sm btn-primary">回复</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 加载更多 -->
                    <div class="text-center mt-4">
                        <button class="btn btn-outline-secondary">
                            加载更多留言
                        </button>
                    </div>
                </div>
                
                <!-- 活动安排 -->
                <div class="contract-tab-content d-none" id="schedule-content">
                    <h3 class="section-title">活动时间线</h3>
                    
                    <div class="bg-white rounded-lg p-5 mb-6 shadow-sm">
                        <!-- 已完成活动 -->
                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-date">2023-06-24 已完成</div>
                            <div class="timeline-content">
                                <h5 class="mb-2">古镇文化探索之旅</h5>
                                <p class="text-sm text-light-text mb-2">参与人数：12人 | 费用：350元/人</p>
                                <p class="text-sm">游览了古镇风貌，品尝了当地特色美食，了解了传统文化历史，晚上还一起参加了篝火晚会。</p>
                                <div class="mt-2">
                                    <a href="#" class="text-primary text-sm">查看活动照片 <i class="fas fa-angle-right"></i></a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 即将进行的活动 -->
                        <div class="timeline-item">
                            <div class="timeline-dot" style="background-color: var(--warning-color);"></div>
                            <div class="timeline-date">2023-07-15 即将进行</div>
                            <div class="timeline-content">
                                <h5 class="mb-2">青山湖露营之旅</h5>
                                <p class="text-sm text-light-text mb-2">已报名：12人 | 预计费用：450元/人</p>
                                <p class="text-sm">湖边露营、烧烤、星空摄影、徒步环湖、日出观赏。集合时间：7月15日早上8点，市体育中心东门。</p>
                                <div class="mt-2">
                                    <button class="btn btn-sm btn-primary">我要参加</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 计划中的活动 -->
                        <div class="timeline-item">
                            <div class="timeline-dot" style="background-color: var(--light-text);"></div>
                            <div class="timeline-date">2023-08-19 计划中</div>
                            <div class="timeline-content">
                                <h5 class="mb-2">高山草甸徒步</h5>
                                <p class="text-sm text-light-text mb-2">正在投票中 | 预计费用：550元/人</p>
                                <p class="text-sm">徒步高山草甸，欣赏自然风光，适合有一定体力的朋友参加。具体路线和时间待定。</p>
                                <div class="mt-2">
                                    <button class="btn btn-sm btn-outline-primary">参与投票</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <h3 class="section-title">未来活动规划</h3>
                    <div class="bg-white rounded-lg p-5 shadow-sm">
                        <p class="mb-4">我们正在征集大家对未来活动的建议，以下是初步规划：</p>
                        
                        <ul class="list-group list-group-flush mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>9月：海滨度假之旅</div>
                                <span class="badge bg-light text-dark">正在征集地点</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>10月：秋季红叶摄影</div>
                                <span class="badge bg-light text-dark">已初选3个地点</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>11月：温泉休闲之旅</div>
                                <span class="badge bg-light text-dark">待讨论</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>12月：年末总结聚会</div>
                                <span class="badge bg-light text-dark">待讨论</span>
                            </li>
                        </ul>
                        
                        <button class="btn btn-outline-primary">
                            <i class="fas fa-lightbulb"></i> 提出活动建议
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 右侧边栏 -->
            <div class="col-lg-4">
                <!-- 合约创建者信息 -->
                <div class="bg-white rounded-lg p-5 mb-6 shadow-sm">
                    <h3 class="section-title">合约创建者</h3>
                    <div class="author-info">
                        <img src="https://picsum.photos/id/1079/60/60" alt="孙浩然的头像" class="author-avatar">
                        <div>
                            <h5 class="mb-1">孙浩然</h5>
                            <p class="text-light-text mb-2">旅行爱好者 · 已认证</p>
                            <p class="text-sm mb-3">
                                喜欢探索小众景点，擅长旅行规划和摄影，已组织12次成功的旅行活动。
                            </p>
                            <div class="d-flex gap-2">
                                <button class="btn btn-primary btn-sm action-btn">
                                    <i class="fas fa-user-plus"></i> 关注
                                </button>
                                <button class="btn btn-outline-primary btn-sm action-btn">
                                    <i class="fas fa-comment"></i> 私信
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-4 pt-4 border-top border-color">
                        <div class="text-center">
                            <div class="font-weight-bold">12</div>
                            <div class="text-sm text-light-text">创建的合约</div>
                        </div>
                        <div class="text-center">
                            <div class="font-weight-bold">156</div>
                            <div class="text-sm text-light-text">关注者</div>
                        </div>
                        <div class="text-center">
                            <div class="font-weight-bold">4.9</div>
                            <div class="text-sm text-light-text">平均评分</div>
                        </div>
                    </div>
                </div>
                
                <!-- 合约状态卡片 -->
                <div class="bg-white rounded-lg p-5 mb-6 shadow-sm">
                    <h3 class="section-title">合约状态</h3>
                    <div class="mb-4">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-sm">参与进度</span>
                            <span class="text-sm font-medium">15/20 人</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-sm">合约进度</span>
                            <span class="text-sm font-medium">1/6 个月</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-secondary" role="progressbar" style="width: 17%" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-sm">已完成活动</span>
                            <span class="text-sm font-medium">1/6 次</span>
                        </div>
                        <div class="progress" style="height: 8px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 17%" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    
                    <div class="text-sm">
                        <div class="mb-2"><strong>合约到期时间：</strong> 2023-12-15（剩余5个月）</div>
                        <div><strong>下次活动：</strong> 2023-07-15（14天后）</div>
                    </div>
                </div>
                
                <!-- 相关合约推荐 -->
                <div class="bg-white rounded-lg p-5 mb-6 shadow-sm">
                    <h3 class="section-title">相关合约推荐</h3>
                    <div class="row gap-4">
                        <div class="col-12">
                            <a href="#" class="text-decoration-none text-dark related-contract d-block">
                                <div class="related-image">
                                    <img src="https://picsum.photos/id/1058/400/300" alt="徒步活动合约图片" class="img-fluid">
                                </div>
                                <div class="related-content">
                                    <div class="related-title">周末徒步小组合约 - 每周日</div>
                                    <div class="related-meta">
                                        <span class="me-2"><i class="fas fa-users"></i> 18/20人</span>
                                        <span><i class="far fa-calendar-alt"></i> 长期合约</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-12">
                            <a href="#" class="text-decoration-none text-dark related-contract d-block">
                                <div class="related-image">
                                    <img src="https://picsum.photos/id/1060/400/300" alt="摄影活动合约图片" class="img-fluid">
                                </div>
                                <div class="related-content">
                                    <div class="related-title">城市摄影采风合约 - 每周一次</div>
                                    <div class="related-meta">
                                        <span class="me-2"><i class="fas fa-users"></i> 12/15人</span>
                                        <span><i class="far fa-calendar-alt"></i> 中期合约</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-12">
                            <a href="#" class="text-decoration-none text-dark related-contract d-block">
                                <div class="related-image">
                                    <img src="https://picsum.photos/id/42/400/300" alt="美食探索合约图片" class="img-fluid">
                                </div>
                                <div class="related-content">
                                    <div class="related-title">城市美食探索合约 - 每两周一次</div>
                                    <div class="related-meta">
                                        <span class="me-2"><i class="fas fa-users"></i> 10/15人</span>
                                        <span><i class="far fa-calendar-alt"></i> 中期合约</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="text-center mt-4">
                        <a href="#" class="text-primary text-decoration-none">查看更多相关合约</a>
                    </div>
                </div>
                
                <!-- 合约公告 -->
                <div class="bg-white rounded-lg p-5 shadow-sm">
                    <h3 class="section-title">合约公告</h3>
                    <div class="mb-4 p-3 bg-light rounded border-l-4 border-primary">
                        <h6 class="mb-1">【重要通知】关于7月露营活动的说明</h6>
                        <p class="text-sm text-light-text mb-1">发布于 2023-07-02</p>
                        <p class="text-sm">请参加7月露营活动的成员提前准备好个人装备，我们将在7月10日前确认最终名单和详细行程安排。</p>
                    </div>
                    <div class="p-3 bg-light rounded border-l-4 border-secondary">
                        <h6 class="mb-1">【活动回顾】6月古镇之旅圆满结束</h6>
                        <p class="text-sm text-light-text mb-1">发布于 2023-06-26</p>
                        <p class="text-sm">感谢所有参与6月古镇之旅的成员，活动照片已上传至群相册，欢迎查看和分享。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-6">
                    <h5 class="mb-3">安全社交平台</h5>
                    <p class="text-muted">专注于提供安全、可靠的社交环境，所有交友推荐均经过身份认证</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="#" class="text-white"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-wechat fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-instagram fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-twitter fa-lg"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">首页</a></li>
                        <li><a href="#" class="text-muted">担保交友</a></li>
                        <li><a href="#" class="text-muted">合约交友</a></li>
                        <li><a href="#" class="text-muted">兴趣群组</a></li>
                    </ul>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">安全中心</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">身份认证</a></li>
                        <li><a href="#" class="text-muted">安全指南</a></li>
                        <li><a href="#" class="text-muted">举报中心</a></li>
                        <li><a href="#" class="text-muted">隐私政策</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">发布合约交友</h5>
                    <p class="text-muted mb-3">创建你的交友合约，找到志同道合的朋友一起实现目标</p>
                    <button class="btn btn-primary w-100">
                        <i class="fas fa-plus me-1"></i> 发布合约
                    </button>
                </div>
            </div>
            <div class="border-top border-gray-700 mt-6 pt-6 text-center text-muted">
                <p>&copy; 2023 安全社交平台 版权所有 | 致力于提供安全的社交环境</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 标签页切换功能
        document.querySelectorAll('.contract-tab-item').forEach(tab => {
            tab.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有标签的active类
                document.querySelectorAll('.contract-tab-item').forEach(t => {
                    t.classList.remove('active');
                });
                
                // 为当前点击的标签添加active类
                this.classList.add('active');
                
                // 隐藏所有内容
                document.querySelectorAll('.contract-tab-content').forEach(content => {
                    content.classList.add('d-none');
                });
                
                // 显示对应内容
                const tabName = this.getAttribute('data-tab');
                document.getElementById(`${tabName}-content`).classList.remove('d-none');
            });
        });
        
        // 回复功能
        document.querySelectorAll('.reply-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 隐藏所有回复框
                document.querySelectorAll('.reply-form').forEach(form => {
                    form.classList.remove('active');
                });
                
                // 显示当前点击的回复框
                const replyForm = this.closest('.comment-item, .reply-item').querySelector('.reply-form');
                replyForm.classList.add('active');
            });
        });
        
        // 取消回复
        document.querySelectorAll('.cancel-reply').forEach(btn => {
            btn.addEventListener('click', function() {
                this.closest('.reply-form').classList.remove('active');
            });
        });
        
        // 点赞功能
        document.querySelectorAll('.action-btn').forEach(btn => {
            if (btn.querySelector('.fa-heart')) {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    if (icon.classList.contains('far')) {
                        // 点赞
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                    } else {
                        // 取消点赞
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                    }
                });
            }
            
            // 收藏功能
            if (btn.querySelector('.fa-bookmark')) {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    if (icon.classList.contains('far')) {
                        // 收藏
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('saved');
                    } else {
                        // 取消收藏
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('saved');
                    }
                });
            }
        });
    </script>
</body>
</html>

